<template>
	<view class="container">
		<u-sticky>
			<view class="head">
				<view class="title">选择要邀请的团队成员</view>
				<view class="item" @click="gotoPage">邀请记录</view>
			</view>
			<view class="search-warp">
				<view class="search-box">
					<view style="font-size: 0; margin-right: 14rpx">
						<image style="width: 40rpx; height: 40rpx" src="static/5.png"></image>
					</view>
					<input class="flex-1" v-model="keyword" type="text" @input="search" placeholder-style="font-size: 28rpx" placeholder="输入合伙人姓名/电话" />
				</view>
			</view>
		</u-sticky>
		<!-- 成员列表 -->
		<block v-if="list.length">
			<scroll-view :scroll-y="true" :show-scrollbar="true" class="scrollView">
				<view class="scroll-item" @click="select(item, index)" v-for="(item, index) in list" :key="index">
					<view class="flex align-center">
						<view style="font-size: 0; margin: 0 32rpx; margin-bottom: 20rpx">
							<view v-if="item.isSelect == 0" class="radio"></view>
							<image v-else style="width: 40rpx; height: 40rpx" src="static/6.png"></image>
						</view>
						<view class="flex-1 flex bb">
							<view class="pic">
								<image :src="item.avatar"></image>
							</view>
							<view class="flex flex-column justify-between" style="height: 84rpx">
								<view class="name">
									{{ item.name }}
								</view>
								<view class="mobile">
									{{ item.mobile }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<!-- 占位置 -->
		<view class="empty" v-else>暂无数据</view>
		<!-- 下一步按钮 -->
		<view class="flex justify-center btn-group">
			<button @click="goSetup" class="nextBtn">下一步</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			list: [],
			page: 1,
			lastPage: 0,
			selectId: 0
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		//邀请记录
		gotoPage() {
			uni.navigateTo({
				url: `/pages/schedule/invitationRecord`
			});
		},
		//搜索
		search(e) {
			this.getList();
		},
		//点击下一步
		goSetup() {
			if (this.selectId == 0) {
				uni.showToast({
					title: '请选择要邀请的成员',
					icon: 'none'
				});
				return;
			}
			uni.navigateTo({
				url: `/pages/schedule/joinStore?userId=${this.selectId}&username=${this.username}&pageId=myTame`
			});
		},
		//选择人员
		select(item, index) {
			if (item.isSelect == 0) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = 0;
				}
				this.list[index].isSelect = 1;
				this.selectId = item.id;
				this.username = item.name;
			} else {
				this.list[index].isSelect = 0;
				this.selectId = 0;
			}
		},
		// 获取人员列表
		getList() {
			uni.showLoading({
				title: '数据请求中···'
			});
			this.$request({
				url: 'partners/team_list',
				method: 'POST',
				data: {
					keyword: this.keyword
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					data.list.map((item) => {
						item.isSelect = 0;
						item.mobile = item.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
					});
					this.list = data.list;
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					});
				}
				uni.hideLoading();
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	height: 100%;
	padding: 0 0 128rpx;
	box-sizing: border-box;
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 36rpx 32rpx 0;
		.title {
			font-size: 32rpx;
			color: #000;
		}
		.item {
			font-size: 28rpx;
			color: #666;
		}
	}
	.search-warp {
		padding: 36rpx 32rpx 8rpx;
		.search-box {
			display: flex;
			align-items: center;
			background: #f3f3f3;
			border-radius: 8rpx;
			padding: 14rpx 24rpx;
		}
	}
	.scrollView {
		width: 100%;
		height: calc(100% - 128rpx);
		&::-webkit-scrollbar {
			display: block;
			width: 8rpx;
			height: 8rpx;
			background-color: rgba(0, 0, 0, 0.2);
		}
		.scroll-item {
			padding: 32rpx 32rpx 0;
			.radio {
				width: 36rpx;
				height: 36rpx;
				border: 2rpx solid #999;
				border-radius: 50%;
			}
			.bb {
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #efefef;
			}
			.pic {
				font-size: 0;
				margin-right: 20rpx;
				image {
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
				}
			}
			.name {
				font-size: 30rpx;
				color: #333;
			}
			.mobile {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	.empty {
		padding-top: 148rpx;
		font-size: 28rpx;
		color: #666;
		text-align: center;
	}

	.btn-group {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 128rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.nextBtn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
		border-radius: 40rpx;
		font-size: 24rpx;
		color: #fff;
	}
}
</style>
<style>
page {
	height: 100%;
}
</style>
